<template>
  <div class="column column--grid has-lead-image">
    <!-- <header class="header header--secondary" v-for="(item,index) in props.headerData" :key="index">
      <a class="title" :href="item.link">
        <div class="link">{{ item.content }}</div>
      </a>
    </header> -->
    <header class="header header--secondary" >
      <a class="title" >
        <div class="link">THE COST OF THINGS</div>
      </a>
    </header>
    <div class="title__header link" style="width: 100%" v-for="(item,index) in linkData1" :key="index">
      <a :href="item.link">
        <img class="lazyload" :src="imgPath+item.cover" />
      </a>
    </div>

    <div class="module module--section" >
      <div class="column column--full">
        <div class="element element--article video MarketWatchcom" v-for="(item ,index) in linkData2" :key="index">
          <figure class="article__figure">
            <!-- 时间 -->
            <!-- <span class="article__length">{{item.content}}</span> -->
            <a class="figure__image video disableShadowBox" >
              <img class="lazyload" :src="imgPath+item.cover" />
              <i class="icon icon--play"></i>
            </a>
          </figure>
          <div class="article__content over-video">
            <h3 class="article__headline">
              <a class="link" >
                {{item.title}}
              </a>
            </h3>
          </div>
        </div>
      </div>
      <div class="element element--section-footer">
        <a class="btn btn--section" >See More</a>
      </div>
    </div>
  </div>
</template>
<script  setup>
const props = defineProps(["linkData",]);
let linkData1 = ref([props.linkData[0]])
let linkData2 = ref([props.linkData[1],props.linkData[2]])

import  getConfig  from "@/api/login.js";
let imgPath = ref('');
onMounted(()=>{
  changeVideo();
})
const changeVideo = () => {
  getConfig.getSystem()
  .then((res) => {
      if (res.code == "0") {
        imgPath.value = res.data.awsPrefix
      }
    })
    .catch((e) => {});
}
</script>
<style lang="scss" scoped></style>
